<template>
  <div>
    <van-nav-bar
        :fixed="true"
        @click-left="onClickLeft"
    >
      <div class="van-nav-bar_title" slot="title">{{ $t('orderDetails.title') }}</div>
      <van-icon name="arrow-left" slot="left" class="nav_bar_icon"></van-icon>
    </van-nav-bar>
    <van-row class="main">
      <van-overlay :show="loading"></van-overlay>
      <van-loading v-if="loading" type="spinner" class="loading" vertical></van-loading>
      <div v-else>
        <van-row class="order_heard">
          <van-image v-if="!isLunDu" class="img" :src="orderData['merchantLogo']"></van-image>
          <van-row class="order_heard_text">
            {{ orderData['merchantName'] }}
            <div class="update_sync" v-if="orderData['orderStatus'] === 'CURRENT' && !orderData['updateSyncMark']">
              {{ $t('orderDetails.update') }}
            </div>
            <van-row class="contact">
              {{ $t('orderDetails.phone') }}: {{ orderData['merchantServiceTel'] }}<br>
              {{ $t('orderDetails.email') }}: {{ orderData['merchantServiceEimal'] }}
            </van-row>
          </van-row>
        </van-row>
        <van-row class="order_info">
          <!--                    订单编号-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.orderNo') }}</van-col>
            <van-col :span="10">{{ orderData['orderNo'] }}</van-col>
          </van-row>
          <!--                    订单创建时间-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.createTime') }}</van-col>
            <van-col :span="10">{{ toStr(orderData['orderCreateTime'], 1) }}</van-col>
          </van-row>
          <!--                    借款金额-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.loanAmount') }}</van-col>
            <van-col :span="10">{{ orderData['amount'] ? replaceStr(orderData['amount']) : '' }}</van-col>
          </van-row>
          <!--                    借款期限-->
          <van-row>
            <van-col :span="14">
              {{ $t('orderDetails.loanLimit') }}
              <span v-if="orderData['applyPeriodUnit']">({{ $t('unit')[orderData['applyPeriodUnit']] }})</span>
            </van-col>
            <van-col :span="10">{{ orderData['applyPeriod'] * orderData['orderPeriods'] }}</van-col>
          </van-row>
          <!--                    期数-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.periods') }}</van-col>
            <van-col :span="10">{{ orderData['orderPeriods'] }}</van-col>
          </van-row>
          <!--                    日利率-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.dayRate') }}</van-col>
            <van-col :span="10">{{ orderData['dayRate'] ? (orderData['dayRate'] * 100).toFixed(2) + '%' : 0 }}</van-col>
          </van-row>
          <!--                    利息-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.interest') }}</van-col>
            <van-col :span="10">{{
                orderData['interestAmount'] ? replaceStr(orderData['interestAmount']) : 0
              }}
            </van-col>
          </van-row>
          <!--                    服务费-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.serviceAmount') }}</van-col>
            <van-col :span="10">{{ orderData['serviceAmount'] ? replaceStr(orderData['serviceAmount']) : 0 }}</van-col>
          </van-row>
          <!--                    放款金额-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.payMoney') }}</van-col>
            <van-col :span="10">{{ orderData['payMoney'] ? replaceStr(orderData['payMoney']) : 0 }}</van-col>
          </van-row>
          <!--                    应还金额-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.repayAmount') }}</van-col>
            <van-col :span="10">{{ orderData['repayAmount'] ? replaceStr(orderData['repayAmount']) : 0 }}</van-col>
          </van-row>
          <!--                    放款成功日期-->
          <van-row>
            <van-col :span="14">{{ $t('orderDetails.payDate') }}</van-col>
            <van-col :span="10">{{ toStr(orderData['payDate']) }}</van-col>
          </van-row>
          <div v-if="!orderData['delayOrderNo']">
            <!--                    应还日期-->
            <van-row v-if="!isLunDu">
              <van-col :span="14">{{ $t('orderDetails.repaymentTime') }}</van-col>
              <van-col :span="10">{{ toStr(orderData['planRepaymentDate']) }}</van-col>
            </van-row>
            <!--                    逾期天数-->
            <van-row v-if="!isLunDu">
              <van-col :span="14">{{ $t('orderDetails.dueDays') }}</van-col>
              <van-col :span="10">{{ orderData['dueDays'] }}</van-col>
            </van-row>
            <!--                    当前应还金额-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.currRepayAmount') }}</van-col>
              <van-col :span="10">{{
                  orderData['currRepayAmount'] ? replaceStr(orderData['currRepayAmount']) : 0
                }}
              </van-col>
            </van-row>
            <!--                    剩余待还金额-->
            <van-row v-if="!isLunDu">
              <van-col :span="14">{{ $t('orderDetails.leftAmount') }}</van-col>
              <van-col :span="10">{{ orderData['leftAmount'] ? replaceStr(orderData['leftAmount']) : 0 }}</van-col>
            </van-row>
            <!--                    订单状态-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.orderStatus') }}</van-col>
              <van-col :span="10">{{ setStatus(orderData['orderStatus']) }}</van-col>
            </van-row>
          </div>
        </van-row>
        <div class="delay" v-if="orderData['delayOrderNo']">
          <van-row>
            <span class="delay_title">
                {{ $t('orderDetails.delayNo') + orderData['delayNo'] + $t('orderDetails.delayNo1') }}
            </span>
          </van-row>
          <div class="delay_info">
            <!--                    订单编号-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.orderNo') }}</van-col>
              <van-col :span="10">{{ orderData['delayOrderNo'] ? orderData['delayOrderNo'] : '' }}</van-col>
            </van-row>
            <!--                    订单创建时间-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.createTime') }}</van-col>
              <van-col :span="10">{{ toStr(orderData['delayTime']) }}</van-col>
            </van-row>
            <!--                    借款金额-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.loanAmount') }}</van-col>
              <van-col :span="10">{{
                  orderData['delayLoanAmount'] ? replaceStr(orderData['delayLoanAmount']) : 0
                }}
              </van-col>
            </van-row>
            <!--                    展期期限-->
            <van-row>
              <van-col :span="14">
                {{ $t('orderDetails.delayLimit') }}
                <span v-if="orderData['delayPeriodUnit']">({{ $t('unit')[orderData['delayPeriodUnit']] }})</span>
              </van-col>
              <van-col :span="10">{{ orderData['delayPeriod'] ? orderData['delayPeriod'] : '' }}</van-col>
            </van-row>
            <!--                    展期期数-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.delayPeriod') }}</van-col>
              <van-col :span="10">{{ orderData['delayOrderPeriods'] ? orderData['delayOrderPeriods'] : '' }}</van-col>
            </van-row>
            <!--                    应还日期-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.repaymentTime') }}</van-col>
              <van-col :span="10">{{ toStr(orderData['delayRepaymentTime']) }}</van-col>
            </van-row>
            <!--                    逾期天数-->
            <van-row v-if="!isLunDu">
              <van-col :span="14">{{ $t('orderDetails.dueDays') }}</van-col>
              <van-col :span="10">{{ orderData['leftAmount'] ? replaceStr(orderData['leftAmount']) : '' }}</van-col>
            </van-row>
            <!--                    当前应还金额-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.currRepayAmount') }}</van-col>
              <van-col :span="10">{{
                  orderData['delayPayAmount'] ? replaceStr(orderData['delayPayAmount']) : 0
                }}
              </van-col>
            </van-row>
            <!--                    剩余待还金额-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.leftAmount') }}</van-col>
              <van-col :span="10">{{
                  orderData['delayLeftAmount'] ? replaceStr(orderData['delayLeftAmount']) : 0
                }}
              </van-col>
            </van-row>
            <!--                    订单状态-->
            <van-row>
              <van-col :span="14">{{ $t('orderDetails.orderStatus') }}</van-col>
              <van-col :span="10">{{ setStatus(orderData['orderStatus']) }}</van-col>
            </van-row>
          </div>
        </div>
        <div
            v-if="(!orderData['delayPeriodUnit'] && orderData['orderStatus'] === 'CURRENT' || orderData['orderStatus'] === 'OVERDUE') || (orderData['delayPeriodUnit'] && !orderData['delayFinish'])"
            class="btn" @click="repay">
          {{ $t('orderDetails.repay') }}
        </div>
      </div>

    </van-row>
  </div>
</template>

<script>
import { orderDetail } from '@/api'
import { formatDate } from '@/libs/date'

export default {
  name: "order-details",
  data() {
    return {
      loading: true,
      orderData: {}
    }
  },
  mounted() {
    this.getData();
  },
  computed: {
    isLunDu() {
      return this.orderData.merchantId === '10002'
    }
  },
  methods: {
    onClickLeft() {
      this.$bridge.goBack();
    },
    replaceStr(data) {
      if (data) {
        return (parseInt(data)).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1.');
      } else {
        return 0
      }
    },
    getData() {
      // let res = [{
      //   "merchantLogo": null,
      //   "merchantName": "轮渡",
      //   "orderId": 20201119000002,
      //   "orderNo": "SH20201119000002",
      //   "orderCreateTime": 1605802359000,
      //   "orderCreateTimeStr": "11-20-2020 00:12",
      //   "amount": 1200000.00000,
      //   "applyPeriod": 7,
      //   "applyPeriodUnit": "DAYS",
      //   "orderStatus": "REVIEWING",
      //   "planRepaymentDate": null,
      //   "planRepaymentDateStr": null,
      //   "leftAmount": null,
      //   "repayUrl": null,
      //   "updateSyncMark": true,
      //   "dueDays": null,
      //   "orderPeriods": 1
      // }]
      this.loginInfo().then(loginInfo => {
        if (loginInfo) {
          window.sessionStorage.setItem("loginInfo", JSON.stringify(loginInfo));
          let data = {
            orderId: this.$route.query.orderId
          };
          orderDetail(data).then(res => {
            this.loading = false;
            if (res.data.success) {
              this.orderData = res.data.data;
            } else {
              this.$notify(res.data.message);
            }
          })
        }
      })
    },
    loginInfo() {
      return new Promise((resolve, reject) => {
        this.$bridge["getLoginInfo"](null, res => {
          resolve(JSON.parse(res));
        });
      });
    },
    repay() {
      if (this.isLunDu) {//轮渡
        this.$router.push('/repay?orderId=' + this.$route.query.orderId)
      } else {
        window.location.href = this.orderData['repayUrl']
      }
    },
    setStatus(data) {
      let status = this.$t('orderState');
      if (data) {
        let name = status.filter(v => {
          return data === v['value']
        });
        return name && name[0]['desc'] ? name[0]['desc'] : ""
      }
    },
    toStr(data, type = 2) {
      if (data) {
        return type === 1 ? formatDate(new Date(data), 'dd-MM-yyyy hh:mm') : formatDate(new Date(data), 'dd-MM-yyyy');
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "../assets/css/main";

.main {
  .order_heard {
    margin: 16px 16px 14px 16px;
    font-size: 16px;
    color: #2D3632;
    line-height: 28px;

    .img {
      width: 28px;
      height: 28px;
      float: left;
    }

    .order_heard_text {
      float: left;
      margin-left: 8px;

      .contact {
        padding-top: 14px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 18px;
      }
    }

    .update_sync {
      float: right;
      font-size: 12px;
      font-weight: 400;
      color: #FF5454;
      line-height: 18px;
    }
  }

  .order_info {
    margin: 0 16px 24px 16px;
    background-color: #ffffff;
    padding: 8px;

    .van-row {
      padding: 8px 0;

      .van-col:first-child {
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 18px;
      }

      .van-col:last-child {
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        color: #2D3632;
        line-height: 18px;
      }
    }
  }

  .delay {
    .van-row:first-child {
      padding: 0;
    }

    margin: 0 16px;

    .delay_title {
      font-size: 14px;
      color: #ffffff;
      padding: 7px;
      background-color: #39C581;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    .delay_info {
      padding: 8px;
      margin-top: 7px;
      background-color: #ffffff;

      .van-row {
        padding: 8px 0;

        .van-col:first-child {
          text-align: left;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 18px;
        }

        .van-col:last-child {
          text-align: right;
          font-size: 14px;
          font-weight: 400;
          color: #2D3632;
          line-height: 18px;
        }
      }
    }
  }

  .btn {
    margin: 23px 16px;
    text-align: center;
    height: 44px;
    line-height: 44px;
    background: #39C581;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.loading {
  z-index: 1000;
  position: absolute;
  margin-top: 60%;
  margin-left: 45%;
}
</style>
